<template>
	<view>
		<!-- <view class="" id="kline" style="width:300px;height:400px"></view> -->
		<view class="" id="kline" style="height:500px"></view>
		<view v-for="v in mainIndicators">
			<up-button type="primary" @click="setMainIndicator(v)">{{v}}</up-button>
		</view>
		<view v-for="v in subIndicators">
			<up-button type="primary" @click="setSubIndicator(v)">{{v}}</up-button>
		</view>
		<view v-for="v in interval">
			<up-button type="primary" @click="changeKline(v)">{{v}}</up-button>
		</view>
		<view v-for="v in lang">
			<up-button type="primary" @click="setLang(v.key)">语言{{v}}</up-button>
		</view>
	</view>
</template>

<script setup>
	import {
		onMounted,
		onUnmounted,
		ref
	} from 'vue'
	import {
		init,
		dispose,
		registerLocale
	} from 'klinecharts'
	import websocket from '@/ws_serve/wsocket';
	import config from '@/api/config.js'
	import {
		onShow,
		onHide
	} from '@dcloudio/uni-app'


registerLocale('zh-HK', {
  time: '時間：',
  open: '開：',
  high: '高：',
  low: '低：',
  close: '收：',
  volume: '成交量：'
})
	var chart = null,
		klineData = {},
		indicatorsStatus = {},
		symbol = 'BTCUSDT',
		c_interval = '1m';

	const interval = ['1m', '5m', '15m', '30m', '1h', '4h', '12h', '1d', '1w']

	const mainIndicators = ['MA',
		'BOLL',
	]
	const subIndicators = ['EMA', 'SMA', 'BBI', 'VOL', 'MACD', 'KDJ', 'RSI', 'VR', 'MTM', 'EMV', 'SAR', 'AO', 'ROC', 'PVT',
		'AVP'
	]
	onMounted(() => {
		chart = init('kline')
		for (let s of interval) {
			let k = `ckline_${symbol.toLowerCase()}_${s}`
			klineData[k] = [];
		}
		// socket.connect()
		let a = [{"e":"kline","E":1725430491457,"s":"BTCUSDT","k":{"t":1725408000000,"T":1725451199999,"s":"BTCUSDT","i":"12h","f":5347699555,"L":5348996505,"o":"57452.00","c":"56270.10","h":"57920.00","l":"55555.00","v":"114024.634","n":1296584,"x":false,"q":"6449817527.26660","V":"53154.777","Q":"3006600084.91214","B":"0"}},{"e":"kline","E":1725430491825,"s":"BTCUSDT","k":{"t":1725408000000,"T":1725451199999,"s":"BTCUSDT","i":"12h","f":5347699555,"L":5348996507,"o":"57452.00","c":"56270.20","h":"57920.00","l":"55555.00","v":"114024.644","n":1296586,"x":false,"q":"6449818089.96820","V":"53154.783","Q":"3006600422.53334","B":"0"}},{"e":"kline","E":1725430492126,"s":"BTCUSDT","k":{"t":1725408000000,"T":1725451199999,"s":"BTCUSDT","i":"12h","f":5347699555,"L":5348996529,"o":"57452.00","c":"56270.10","h":"57920.00","l":"55555.00","v":"114026.449","n":1296608,"x":false,"q":"6449919657.50890","V":"53154.885","Q":"3006606162.09374","B":"0"}},{"e":"kline","E":1725430492408,"s":"BTCUSDT","k":{"t":1725408000000,"T":1725451199999,"s":"BTCUSDT","i":"12h","f":5347699555,"L":5348996530,"o":"57452.00","c":"56270.20","h":"57920.00","l":"55555.00","v":"114026.481","n":1296609,"x":false,"q":"6449921458.15530","V":"53154.917","Q":"3006607962.74014","B":"0"}},{"e":"kline","E":1725430492699,"s":"BTCUSDT","k":{"t":1725408000000,"T":1725451199999,"s":"BTCUSDT","i":"12h","f":5347699555,"L":5348996532,"o":"57452.00","c":"56270.20","h":"57920.00","l":"55555.00","v":"114027.255","n":1296611,"x":false,"q":"6449965011.29010","V":"53155.691","Q":"3006651515.87494","B":"0"}},{"e":"kline","E":1725430492980,"s":"BTCUSDT","k":{"t":1725408000000,"T":1725451199999,"s":"BTCUSDT","i":"12h","f":5347699555,"L":5348996543,"o":"57452.00","c":"56270.20","h":"57920.00","l":"55555.00","v":"114028.882","n":1296622,"x":false,"q":"6450056562.85200","V":"53156.783","Q":"3006712962.93334","B":"0"}},{"e":"kline","E":1725430493262,"s":"BTCUSDT","k":{"t":1725408000000,"T":1725451199999,"s":"BTCUSDT","i":"12h","f":5347699555,"L":5348996577,"o":"57452.00","c":"56268.10","h":"57920.00","l":"55555.00","v":"114030.384","n":1296656,"x":false,"q":"6450141079.35060","V":"53156.865","Q":"3006717576.92594","B":"0"}},{"e":"kline","E":1725430493595,"s":"BTCUSDT","k":{"t":1725408000000,"T":1725451199999,"s":"BTCUSDT","i":"12h","f":5347699555,"L":5348996582,"o":"57452.00","c":"56268.00","h":"57920.00","l":"55555.00","v":"114030.541","n":1296661,"x":false,"q":"6450149913.44210","V":"53157.020","Q":"3006726298.48144","B":"0"}},{"e":"kline","E":1725430493883,"s":"BTCUSDT","k":{"t":1725408000000,"T":1725451199999,"s":"BTCUSDT","i":"12h","f":5347699555,"L":5348996595,"o":"57452.00","c":"56268.00","h":"57920.00","l":"55555.00","v":"114031.317","n":1296674,"x":false,"q":"6450193577.48570","V":"53157.776","Q":"3006768837.16504","B":"0"}},{"e":"kline","E":1725430494167,"s":"BTCUSDT","k":{"t":1725408000000,"T":1725451199999,"s":"BTCUSDT","i":"12h","f":5347699555,"L":5348996597,"o":"57452.00","c":"56268.10","h":"57920.00","l":"55555.00","v":"114031.326","n":1296676,"x":false,"q":"6450194083.89790","V":"53157.778","Q":"3006768949.70124","B":"0"}},{"e":"kline","E":1725430494484,"s":"BTCUSDT","k":{"t":1725408000000,"T":1725451199999,"s":"BTCUSDT","i":"12h","f":5347699555,"L":5348996599,"o":"57452.00","c":"56268.10","h":"57920.00","l":"55555.00","v":"114031.673","n":1296678,"x":false,"q":"6450213608.92860","V":"53158.125","Q":"3006788474.73194","B":"0"}},{"e":"kline","E":1725430494814,"s":"BTCUSDT","k":{"t":1725408000000,"T":1725451199999,"s":"BTCUSDT","i":"12h","f":5347699555,"L":5348996602,"o":"57452.00","c":"56268.00","h":"57920.00","l":"55555.00","v":"114031.788","n":1296681,"x":false,"q":"6450220079.74860","V":"53158.125","Q":"3006788474.73194","B":"0"}},{"e":"kline","E":1725430495131,"s":"BTCUSDT","k":{"t":1725408000000,"T":1725451199999,"s":"BTCUSDT","i":"12h","f":5347699555,"L":5348996608,"o":"57452.00","c":"56268.00","h":"57920.00","l":"55555.00","v":"114032.020","n":1296687,"x":false,"q":"6450233133.92550","V":"53158.134","Q":"3006788981.14484","B":"0"}},{"e":"kline","E":1725430495416,"s":"BTCUSDT","k":{"t":1725408000000,"T":1725451199999,"s":"BTCUSDT","i":"12h","f":5347699555,"L":5348996615,"o":"57452.00","c":"56268.00","h":"57920.00","l":"55555.00","v":"114032.637","n":1296694,"x":false,"q":"6450267851.28680","V":"53158.187","Q":"3006791963.35414","B":"0"}},{"e":"kline","E":1725430495832,"s":"BTCUSDT","k":{"t":1725408000000,"T":1725451199999,"s":"BTCUSDT","i":"12h","f":5347699555,"L":5348996624,"o":"57452.00","c":"56268.10","h":"57920.00","l":"55555.00","v":"114033.960","n":1296703,"x":false,"q":"6450342293.85250","V":"53158.204","Q":"3006792919.91184","B":"0"}},{"e":"kline","E":1725430496083,"s":"BTCUSDT","k":{"t":1725408000000,"T":1725451199999,"s":"BTCUSDT","i":"12h","f":5347699555,"L":5348996625,"o":"57452.00","c":"56268.00","h":"57920.00","l":"55555.00","v":"114033.963","n":1296704,"x":false,"q":"6450342462.65650","V":"53158.204","Q":"3006792919.91184","B":"0"}},{"e":"kline","E":1725430496603,"s":"BTCUSDT","k":{"t":1725408000000,"T":1725451199999,"s":"BTCUSDT","i":"12h","f":5347699555,"L":5348996692,"o":"57452.00","c":"56271.90","h":"57920.00","l":"55555.00","v":"114040.207","n":1296771,"x":false,"q":"6450693803.62160","V":"53164.443","Q":"3007143979.51744","B":"0"}},{"e":"kline","E":1725430496862,"s":"BTCUSDT","k":{"t":1725408000000,"T":1725451199999,"s":"BTCUSDT","i":"12h","f":5347699555,"L":5348996695,"o":"57452.00","c":"56272.00","h":"57920.00","l":"55555.00","v":"114040.241","n":1296774,"x":false,"q":"6450695716.86900","V":"53164.471","Q":"3007145555.13344","B":"0"}},{"e":"kline","E":1725430497348,"s":"BTCUSDT","k":{"t":1725408000000,"T":1725451199999,"s":"BTCUSDT","i":"12h","f":5347699555,"L":5348996702,"o":"57452.00","c":"56272.00","h":"57920.00","l":"55555.00","v":"114040.894","n":1296781,"x":false,"q":"6450732462.48500","V":"53165.124","Q":"3007182300.74944","B":"0"}},{"e":"kline","E":1725430497750,"s":"BTCUSDT","k":{"t":1725408000000,"T":1725451199999,"s":"BTCUSDT","i":"12h","f":5347699555,"L":5348996707,"o":"57452.00","c":"56272.00","h":"57920.00","l":"55555.00","v":"114041.244","n":1296786,"x":false,"q":"6450752157.68440","V":"53165.468","Q":"3007201658.31744","B":"0"}}]

		let k = `ckline_${symbol.toLowerCase()}_${c_interval}`
		for (let s of a) {
			upKlineData(k, s)
		}
		chart.applyNewData(klineData[k])
	})

	onUnmounted(() => {
		dispose('chart')
		klineData = {}
	})
	onShow(() => {
		// socket.reconnect()

	})
	onHide(() => {
		socket.close()
	})

	const tz = [{
			key: 'Asia/Shanghai',
			text: '上海-Shanghai'
		},
		{
			key: 'Europe/Berlin',
			text: '柏林-Berlin'
		},
		{
			key: 'America/Chicago',
			text: '芝加哥-Chicago'
		}
	]

	const setTimezone = (timezone) => {
		chart.setTimezone(timezone)
	}

	const lang = [{
			key: 'zh-CN',
			text: '简体中文'
		},
		{
			key: 'zh-HK',
			text: '繁体中文'
		},
		{
			key: 'en-US',
			text: 'English'
		}
	]

	const setLang = (lang) => {
		chart.setLocale(lang)
	}
	const upKlineData = (k, data) => {
		klineData[k].push({
			timestamp: data.E,
			open: parseFloat(data.k.o),
			close: parseFloat(data.k.c),
			high: parseFloat(data.k.h),
			low: parseFloat(data.k.l),
			volume: parseFloat(data.k.v),
			turnover: parseFloat(data.k.q),
		})
		if (klineData[k].length > 1000) {
			klineData[k] = klineData[k].slice(-1000);
		}
	}

	const changeKline = (inter) => {
		c_interval = inter
		let k = `ckline_${symbol.toLowerCase()}_${inter}`
		console.log('change' + k)
		chart.clearData()
		chart.applyNewData(klineData[k]);
	}

	function setMainIndicator(name) {
		if (indicatorsStatus[name]) {
			chart.removeIndicator('candle_pane', name)
			indicatorsStatus[name] = ''
		} else {
			indicatorsStatus[name] = chart.createIndicator(name, true, {
				id: 'candle_pane'
			})
		}
	}

	function setSubIndicator(name) {
		if (indicatorsStatus[name]) {
			chart.removeIndicator('i' + name, name)
			indicatorsStatus[name] = ''
		} else {
			indicatorsStatus[name] = chart.createIndicator(name, true, {
				id: 'i' + name
			})
		}
	}
	const socket = new websocket(config.ws, (data) => {
		if (data.event == 'contract_kline') {
			if (data.data.k.i == c_interval) {
				let k = `ckline_${symbol.toLowerCase()}_${c_interval}`;
				console.log(data.data.k.i, c_interval, k)
				upKlineData(k, data.data)
				chart.updateData({
					timestamp: data.data.E,
					open: parseFloat(data.data.k.o),
					close: parseFloat(data.data.k.c),
					high: parseFloat(data.data.k.h),
					low: parseFloat(data.data.k.l),
					volume: parseFloat(data.data.k.v),
					// 成交额，非必须字段，如果需要展示技术指标'EMV'和'AVP'，则需要为该字段填充数据。
					turnover: parseFloat(data.data.k.q),
				});
			}
		}
		if (data.event.includes('_init')) {
			let k = data.event.replace('_init', '')
			for (let s of data.data) {
				upKlineData(k, s)
			}
			if (k == `ckline_${symbol.toLowerCase()}_${c_interval}`) {
				console.log(klineData[k])
				chart.applyNewData(klineData[k]);
			}
		}
	})

	socket.events.onOpen = (res) => {
		socket.send({
			"event": "subscribe",
			"app_source": "h5",
			"type": "contract",
			"symbol": symbol
		})
	}
</script>

<style>

</style>